<template>
  <div id="app-container">


    <div class="addBox" style="width: 700px;margin: 0 auto;">
      <div class="imgBox" style="float: left">
        <h2>小区图片</h2>
        <el-upload
          class="avatar-uploader"
          :action="`http://localhost:8087/uploadImg`"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl"
               :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>


      <div style="float: left;margin-left: 50px;margin-top: 40px">
        <el-form ref="form" label-width="80px">

          <el-form-item label="小区名">
            <el-input v-model="quarters.name"></el-input>
          </el-form-item>

          <el-form-item label="年代">
            <el-input v-model="quarters.years"></el-input>
          </el-form-item>

          <el-form-item label="容积率">
            <el-input v-model="quarters.plotRatio"></el-input>
          </el-form-item>
          <el-form-item label="价格系数">
            <el-input v-model="quarters.priceRatio"></el-input>
          </el-form-item>

          <el-form-item label="绿化率">
            <el-input v-model="quarters.green"></el-input>
          </el-form-item>

          <el-form-item label="电梯">
            <el-select v-model="quarters.elevator">
              <el-option label="有" :value="1"></el-option>
              <el-option label="无" :value="0"></el-option>
            </el-select>
          </el-form-item>

        </el-form>
      </div>
      <div style="margin-top: 70px;float: left">
        <el-form :inline="true">

          <el-form-item label="物业">
            <el-input v-model="quarters.property"></el-input>
          </el-form-item>

          <el-form-item label="物业电话">
            <el-input v-model="quarters.propertyPhone"></el-input>
          </el-form-item>


          <el-form-item label="区" v-if="!$route.params.id">
            <el-select v-model="quarters.areaCode" @change="getStreetByArea()" placeholder="请选择">
              <el-option
                v-for="item in areaList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="街道"  v-if="!$route.params.id">
            <el-select v-model="quarters.streetCode" placeholder="请选择">
              <el-option
                v-for="item in streetList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>

        </el-form>
      </div>

    </div>


    <!--          <div style="width: 650px;margin-left:300px;clear: left">-->
    <!--            <h3>简介</h3>-->
    <!--            <el-input-->
    <!--              type="textarea"-->
    <!--              :rows="2"-->
    <!--              placeholder="请输入内容"-->
    <!--              v-model="quarters.introduction"-->
    <!--              style="width: 500px"-->
    <!--              :autosize="{ minRows: 2, maxRows: 5}"-->
    <!--            >-->
    <!--            </el-input>-->

    <!--          </div>-->
    <el-button style="margin-top: 40px;margin-left: 50px" type="primary" @click="addAndEditQuarter()">保存</el-button>

  </div>
</template>

<script>
import AreaStreet from "@/api/AreaStreet";
import quarters from "@/api/quarters";

export default {

  name: "add.vue",
  data() {
    return {
      areaCode: '',
      areaList: [],
      streetList: [],
      quarters: {
        id: '',
        name: '',
        green: '',
        elevator: '',
        streetCode: '',
        propertyPhone: '',
        priceRatio: '',
        property: '',
        plotRatio: '',
        years: '',
        img:''
      },
      imageUrl: '',
    }
  },
  methods: {
    init() {
      console.log("init")
      //获取路由参数
      //如果路由参数不存在则为新增,否则为修改
      if (this.$route.params && this.$route.params.id) {
        const  id = this.$route.params.id
        this.initEditQuarter(id)
      } else {
        this.quarters = {}
      }
    },
    addAndEditQuarter(){
      if(this.quarters.id){
          //修改
         this.editQuarter()
      }else {
         //新增
        this.addQuarter()
      }
    },
    initEditQuarter(id) {
      console.log("这是修改")
      quarters.getById(id).then(res => {
        const { data } = res
        this.quarters = data.quarters
        this.imageUrl = "http://139.224.186.148:10001/imgs/"+data.quarters.img
      })
    },
    editQuarter() {

      quarters.edit(this.quarters).then(res => {
        this.$message({
          msg: '修改成功',
          type: 'success',
          duration: 1000
        })
        this.$router.push({path: "/quarters/list"});
      })
    },
    addQuarter() {
      quarters.add(this.quarters).then(res => {
        alert("添加成功")
        //路由跳转
        this.$router.push({path: "/quarters/list"});

      })
    },
    getStreetByArea() {
      this.streetList = []

      AreaStreet.getStreetByArea(this.areaCode).then(res => {
        const {data} = res
        this.streetList = data.streetList
      })
    },
    initArea() {
      AreaStreet.getAreaOfShangHai().then(res => {
        const {data} = res
        this.areaList = data.areaList
      })

    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      const {data} = res
      console.log(res)
      this.quarters.img = data.fileName
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },
  watch: {
    $route:{
      handler(val,oldval){
       this.init()
      },
      // 深度观察监听
      immediate:true
    }
  },

  created() {
    this.initArea();

  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
